@include mmaedia("des") {
    .vipf {
        width: 62.6%;
        margin: 0 auto;
        padding-bottom: 5rem;
   
        h2 {
            margin-top: 3.0625rem;
            width: 100%;
            height: 1.5rem;
            font-family: SourceHanSansCN;
            font-weight: bold;
            font-size: 1.5rem;
            color: #333333;
            line-height: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .vip_activity {
            div {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .vip_img {
                    width: 43.5%;
                    height: 13.4375rem;

                    img {
                        width: 30.75rem;
                        height: 12.5rem;
                        background: #02A0E7;
                    }
                }

                .vip_times {
                    width: 13%;
                    display: flex;
                    justify-content: flex-start;

                    .lines {
                        position: relative;

                        // background-color: aqua;
                        // box-sizing: border-box;
                        span {
                            display: inline-block;
                            width: .8125rem;
                            height: .8125rem;
                            background: rgba(229, 229, 229, 1);
                            border-radius: 50%;
                            margin-left: 10%;


                        }

                        div {
                            display: inline-block;
                            width: .125rem;
                            margin-left: 44%;
                            height: 100%;
                            background-color: rgb(102, 102, 102, 0.3);

                        }
                    }

                    .vip_time {
                        display: inline-block;
                        margin-left: 10%;

                        // background-color: aquamarine;
                        h6 {
                            width: 4rem;
                            height: 1.125rem;
                            font-family: SourceHanSansSC;
                            font-weight: bold;
                            font-size: 1.5rem;
                            color: #666666;
                            line-height: 1.3125rem;
                        }

                        p {
                            margin-top: .3125rem;
                            width: 2.1875rem;
                            height: .75rem;
                            font-family: SourceHanSansSC;
                            font-weight: 400;
                            font-size: 1rem;
                            color: #666666;
                            line-height: 1.3125rem;

                        }
                    }

                }

                .activity_deatils {
                    width: 43.5%;

                    h3 {
                        width: 100%;
                        height: 1.25rem;
                        font-family: SourceHanSansSC;
                        font-weight: bold;
                        font-size: 1.25rem;
                        color: #333333;
                        line-height: 1.25rem;
                    }

                    p {
                        margin-top: -4.375rem;
                        width: 100%;
                        height: 4rem;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        font-size: 1rem;
                        color: #999999;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        -webkit-line-clamp: 3;
                    }
                }
            }

            div:nth-child(1) {
                .vip_times {
                    span {
                        background-color: #02A0E7;
                    }
                }

            }
            // 伪类控制多余的点
            div:nth-last-child(1) {
                .vip_times {
                    .lines {
                        div::after {
                            content: "";
                            width: .8125rem;
                            height: .8125rem;
                            display: inline-block;
                            background-color: #999999;
                            margin-bottom: -13.125rem;
                            margin-left: -0.3438rem;
                            border-radius: 50%;
                        }
                    }
                }

            }

        }
        .list_page {
            // background-color: #333333;
            width: 28.5rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            // background-color: #c3b12a;
            margin-top: 5rem;
            span {
                width: 4.25rem;
                height: 2.1875rem;
                background: #02A0E7;
                font-family: SourceHanSansSC;
                font-weight: 300;
                font-size: 1rem;
                color: #FFFFFF;
                line-height: 2.1875rem;
                text-align: center;
                border: .0625rem solid rgba($color: #666, $alpha: 0.1);
            }
            
            span:last-child {
                color: #666666;
                background-color: rgba(102, 102, 102, 0);
            }
         
            div {
                width: 2.3125rem;
                height: 2.1875rem;
                border: .0625rem solid #DCDCDC;
                text-align: center;
                font-family: SourceHanSansSC;
                font-weight: 300;
                font-size: 1rem;
                color: #666666;
                line-height: 2.1875rem;

                img {
                    width: .5625rem;
                    height: .9375rem;
                }
            }
            div:nth-child(2){
                width: 2.5625rem;
                height: 2.1875rem;
            
            } div:last-child(2){
                width: 2.5625rem;
                height: 2.1875rem;
            
            }

        }

       
    }

}